<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <script src="dev/js/mobiscroll.core-2.6.2.js" type="text/javascript"></script>
    <script src="dev/js/mobiscroll.core-2.6.2-zh.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.core-2.6.2.css" rel="stylesheet" type="text/css" />
	<script src="dev/js/mobiscroll.list-2.6.2.js" type="text/javascript"></script>
	<script src="dev/js/mobiscroll.android-ics-2.6.2.js" type="text/javascript"></script>
	<link href="dev/css/mobiscroll.android-ics-2.6.2.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
		$(function () {

		    $('#demo').mobiscroll().treelist({
		        theme: 'android-ics light',
		        display: 'modal',
		        fixedWidth: [100,160,160],
		        placeholder: 'Please Select ...',
		        lang: 'zh',
		        labels: ['Region', 'Supervisor', 'Tech']
		    });

		    $('#show').click(function(){
		        $('#demo').mobiscroll('show');
		        return false;
		    });

		    $('#clear').click(function () {
		        $('#demo').mobiscroll('clear');
		        return false;
		    });
		    
		});
	</script>
	</head>
	<body>
		<ul id="demo">
    <li data-val="East">East
        <ul>
            <li data-val="Willene S">Willene S
                <ul>
                    <li data-val="Lean F">Lean F</li>
                    <li data-val="Kirby C">Kirby C</li>
                    <li data-val="Edelmira R">Edelmira R</li>
                    <li data-val="Francie S">Francie S</li>
                </ul>
            </li>
            <li data-val="Yuko Crampton">Yuko C
                <ul>
                    <li data-val="Vancouver">Eden E</li>
                    <li data-val="Winnipeg">Milda J</li>
                    <li data-val="Porfirio R">Porfirio R</li>
                </ul>
            </li>
            <li data-val="Toccara A">Toccara A
                <ul>
                    <li data-val="Mildred S">Mildred S</li>
                    <li data-val="Frances P">Frances P</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-val="Central">Central
        <ul>
            <li data-val="Stephania B">Stephania B
                <ul>
                    <li data-val="Leanna S">Leanna S</li>
                    <li data-val="Frank D">Frank D</li>
                    <li data-val="Michael D">Michael D</li>
                    <li data-val="Dana A">Dana A</li>
                </ul>
            </li>
            <li data-val="Tama C">Tama C
                <ul>
                    <li data-val="Stephan V">Stephan V</li>
                    <li data-val="Helen D">Helen D</li>
                    <li data-val="Cliff B">Cliff B</li>
                </ul>
            </li>
            <li data-val="Stephenie R">Stephenie R
                <ul>
                    <li data-val="Miguel E">Miguel E</li>
                    <li data-val="Bartholome A">Bartholomeo A</li>
                    <li data-val="Andy G">Andy G</li>
                </ul>
            </li>
            <li data-val="Shalanda H">Shalanda H
                <ul>
                    <li data-val="Levi K">Levi K</li>
                    <li data-val="Frederico M">Frederico M</li>
                    <li data-val="David G">David G</li>
                    <li data-val="Elisabeth">Elisabeth T</li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-val="West">West
        <ul>
            <li data-val="Rina D">Rina D
                <ul>
                    <li data-val="Marge S">Marge S</li>
                    <li data-val="Bart S">Bart S</li>
                    <li data-val="Davie J">Davie J</li>
                </ul>
            </li>
            <li data-val="Pattie S">Pattie S
                <ul>
                    <li data-val="Patrick M">Patrick M</li>
                    <li data-val="Kagoshima A">Kagoshima A</li>
                    <li data-val="Mark B">Mark B</li>
                </ul>
            </li>
        </ul>
    
    </li>
</ul>

<button id="clear">Clear</button>
<button id="show">Show</button>
	</body>
</html>